<template>
	<view class="content">
		<!-- <image class="logo" src="/static/login_logo@2x.png" mode="aspectFill"></image> -->
		<div class="logo"></div>
		
		<!-- 登录页面主体 start -->
		<div class="login-form">
			<div class="login-field">
				<image src="../../static/login_admin_act@2x.png" mode="widthFix"></image>
				<input type="text" placeholder="请输入用户名" v-model="username" clearable="clearable" />
			</div>
			<div class="login-field">
				<image src="../../static/login_psw_act@2x.png"  style="width: 40rpx;left:18rpx" mode="widthFix"></image>
				<input type="password" placeholder="请输入密码" v-model="password" clearable="clearable" />
			</div>
			<button class="login-button" @click="login">登录</button>
		</div>
		<!-- <div class="login-body">
			    <div class="field">
			      <input type="text" placeholder="请输入用户名" v-model="username" clearable="clearable" />
			    </div>
			    <div class="field">
			      <input type="password" placeholder="请输入密码" v-model="password" clearable="clearable" />
			    </div>
				<button class="login" @click="login">登录</button>
		</div> -->
	</view>
</template>

<script>
	export default {

		data() {
			return {
				title: 'Hello',
				username: '',
				password: '',
				msg: ''
			}
		},
		onLoad() {

		},
		methods: {
			login() {
				//登录数据校验
				if(typeof this.username == 'undefined' || this.username==null || this.username==''){
					uni.showToast({
						title:'请输入用户名',
						icon:"error",
						duration: 1000
					});
					return;
				}
				
				if(typeof this.password == 'undefined' || this.password==null || this.password==''){
					uni.showToast({
						title:'请输入用户密码',
						icon:"error",
						duration: 1000
					});
					return;
				}
				
				
				uni.request({
					// url: "/api/mobile/login",
					url: this.baseUrl+ "/mobile/login",
					method: 'POST',

					data: {
						sno: this.username,
						password: this.password
					},
					headers: {
					  // "token": localStorage.getItem("token"),
						'Content-Type': 'application/vnd.google-earth.kml+xml; charset=utf-8'
						
					},
					success: (res) => {
						if(res.data.code==200 ){
						   if(res.data.result=true){
							   if(res.data.roles && res.data.roles[0]=='辅导员'){
									// localStorage.setItem('token', res.data.token);
									uni.setStorageSync('satoken', res.data.token);
									 // this.$router.push({path:'/pages/TabBar/index/index'}) 				 
									uni.switchTab({
										url: '/pages/TabBar/index/index',
									});						 
								} else {
									uni.showToast({
										title: '用户名或密码不正确',
										duration: 2000
									});
								}				 							  						   
						   }else{
								uni.showToast({
									title: '网络有异常',
									duration: 2000
								});
						   }				 					    
						}
					}
				});
			},
			mounted() {

			}

		}
	}
</script>

<style>
	.content {
		/* display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center; */
		padding: 0 100rpx;
	}
	.logo{
		/* width: 25%;	 */
		/* height: 25%; */
		width: 348rpx;
		height: 200rpx;
		margin: 100rpx auto;
		background-image: url(../../static/login_logo.png);
		-moz-background-size:100% 100%; background-size:100% 100%;
	}
	
	/**主体内容 */
	.login-body {
	  margin: 0 auto;
	  margin-top: -20px;
	  width: 85%;
	  background: #ffffff;
	  box-shadow: 0px 10px 20px rgba(0, 0, 0, 0.1);
	  opacity: 1;
	  border-radius: 10px;
	  padding: 60px 0;
	  height: calc(100% - 200px);
	}
	.field {
	  width: 70%;
	  margin: 0 auto;
	  margin-top: 30px;
	  border-bottom: 1px solid rgb(204, 203, 203);
	  /* 图标输入框对齐 */
	  display: flex;
	  align-items: center;
	  padding: 5px 0;
	}
	.icon {
	  font-size: 22px;
	  color: rgba(0, 0, 240, 0.5);
	}
/* 	input {
	  border: 0;
	  font-size: 26px;
	}
	input::-webkit-input-placeholder {
	  color: rgba(0, 0, 240, 0.5);
	  font-size: 13px;
	}
	input:focus {
	  outline: 0px;
	} */
/* 登录按钮 */
.login {
  width: 70%;
  margin-top: 30px;
  border: 0px;
  height: 40px;
  border-radius: 10px;
  background: rgba(34, 228, 106, 1.0);
  color: #ffffff;
}
/* button:focus {
  outline: 0px;
} */
.login-field{
	margin: 40rpx auto;
	position: relative;
}
.login-field input{
	border: 1rpx solid #CCCCCC;
	padding: 20rpx 0rpx 20rpx 80rpx;
	font-size: 24rpx;
}
.login-field image{
	position: absolute;
	width: 50rpx;
	/* height: 32rpx; */
	top: 18rpx;
	left: 10rpx;
}
.login-button{
	background: #77312A;
	color: white;
	font-size: 30rpx;
	margin-top: 100rpx;
}
</style>
